<template>
  <div class="user-page">
    <div class="user-header">
      <img
        src="http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png"
        alt=""
      />
      <h3>{{ username }}</h3>
    </div>
    <div class="user-actions">
      <van-grid :column-num="3">
        <van-grid-item
          icon="clock-o"
          text="历史记录"
          @click="cutPath('/home/article', 0)"
        />
        <van-grid-item
          icon="bookmark-o"
          text="我的收藏"
          @click="cutPath('/home/collect', 1)"
        />
        <van-grid-item
          icon="thumb-circle-o"
          text="我的点赞"
          @click="cutPath('/home/like', 2)"
        />
      </van-grid>
    </div>

    <div class="user-options">
      <van-cell-group>
        <van-cell title="推荐分享" is-link />
        <van-cell title="意见反馈" is-link />
        <van-cell title="关于我们" is-link />
        <van-cell title="退出登录" is-link @click="logout" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import UserUtil from "@/utils/UserUtil";
import { Dialog } from "vant";

export default {
  name: "UserPage",
  data() {
    return {
      username: "",
      loading: false,
    };
  },
  methods: {
    cutPath(path, active) {
      this.$parent.active = active;
      this.$router.push(path);
    },
    logout() {
      Dialog.confirm({
        title: "警告",
        message: "确认退出吗",
      })
        .then(() => {
          // on confirm
          UserUtil.removeUser();
          //要销毁当前组件不然有缓存
          this.$parent.$destroy();
          this.$router.replace("/login");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  created() {
    const user = UserUtil.getUser();
    this.username = user.username;
  },
};
</script>
<style lang="less" scoped>
.user-page {
  background-color: #f5f5f5;
  padding: 0 2.66667vw;
  height: 92.4vh;
  .user-header {
    padding: 5.3vw 0;
    display: flex;
    align-items: center;
    img {
      width: 21vw;
      height: 21vw;
    }
    h3 {
      margin: 0;
      padding-left: 5.3vw;
      font-size: 4.8vw;
    }
  }
  .user-actions {
    margin-bottom: 5.3vw;
  }
}
</style>
